<!-- START Top Navbar-->
<nav role="navigation" class="navbar topnavbar">
    <!-- START navbar header-->
    <div class="navbar-header">
        <div class="navbar-header">
            <div class="brand-logo">
                <img src="app/img/logo.png" alt="App Logo" class="img-responsive" />
            </div>
            <div class="brand-logo-collapsed">
                <img src="app/img/icon.png" alt="App Logo" class="img-responsive" />
            </div>
        </div>
   </div>
   <!-- END navbar header-->
   <!-- START Nav wrapper-->
   <div uib-collapse="navCollapsed" class="collapse navbar-collapse">
        <!-- Navbar Menu -->
        <ul navbar-menu class="nav navbar-nav">
            <li ng-repeat="item in menuItems" ng-class="{'dropdown': item.children}" uib-dropdown="!!item.children">
                <a ng-if="!item.is_head &amp;&amp; !item.children" ng-href="{{$state.href(item.sref)}}" title="{{item.name}}">
                    <span>{{(item.translate | translate) || item.label}}</span>
                </a>
                <a uib-dropdown-toggle="" ng-if="item.children">                 
                    <span>{{(item.translate | translate) || item.label}}</span>
                </a>
                <!-- START Dropdown menu-->
                <ul class="dropdown-menu animated fadeInUp">
                    <li ng-class="{'dropdown-submenu': level1Item.children}" ng-repeat="level1Item in item.children">
                        <a ng-if="!level1Item.children" ng-href="{{$state.href(level1Item.sref)}}" title="{{level1Item.name}}">
                            <span>{{(level1Item.translate | translate) || level1Item.label}}</span>
                        </a>
                        <a ng-if="level1Item.children">                 
                            <span>{{(level1Item.translate | translate) || level1Item.label}}</span>
                        </a>
                        <ul ng-if="level1Item.children" class="dropdown-menu animated fadeInDown">
                            <li ng-class="{'dropdown-submenu': level2Item.children}" ng-repeat="level2Item in level1Item.children">
                                <a ng-if="!level2Item.children" ng-href="{{$state.href(level2Item.sref)}}" title="{{level2Item.name}}">
                                    <span>{{(level2Item.translate | translate) || level2Item.label}}</span>
                                </a>
                                <a ng-if="level2Item.children">                 
                                    <span>{{(level2Item.translate | translate) || level2Item.label}}</span>
                                </a>
                                <ul ng-if="level2Item.children" class="dropdown-menu animated fadeInDown">
                                    <li ng-class="{'dropdown-submenu': level3Item.children}" ng-repeat="level3Item in level2Item.children">
                                        <a ng-if="!level3Item.children" ng-href="{{$state.href(level3Item.sref)}}" title="{{level3Item.name}}">
                                            <span>{{(level3Item.translate | translate) || level3Item.label}}</span>
                                        </a>
                                        <a ng-if="level3Item.children">                 
                                            <span>{{(level3Item.translate | translate) || level3Item.label}}</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- End Navbar Menu-->
        <!-- START Right Navbar-->
        <ul class="nav navbar-nav navbar-right">
            <!-- Search icon-->
            <!--<li>
                <a search-open="">
                <em class="icon-magnifier"></em>
                </a>
            </li>-->
            <!-- Fullscreen (only desktops)-->
            <li>
                <a title="{{$translate.instant('dashboard.REPLACE_PASSWORD')}}" ng-click="replacePassword()">
                <em class="fa fa-key"></em>
                </a>
            </li>
            <li>
                <a title="{{$translate.instant('dashboard.LOGOUT')}}" ng-click="logout()">
                <em class="icon-logout"></em>
                </a>
            </li>
            <li class="visible-lg">
                <a href="#" toggle-fullscreen="toggle-fullscreen">
                <em class="fa fa-expand"></em>
                </a>
            </li>
            <!--
            <li uib-dropdown class="dropdown dropdown-list">
                <a uib-dropdown-toggle>
                    <em class="icon-bell"></em>
                    <div class="label label-danger">11</div>
                </a>
                <ul class="dropdown-menu animated flipInX">
                    <li>
                        <div class="list-group">
                            <a href="#" class="list-group-item">
                                <div class="media-box">
                                <div class="pull-left">
                                    <em class="fa fa-twitter fa-2x text-info"></em>
                                </div>
                                <div class="media-box-body clearfix">
                                    <p class="m0">New followers</p>
                                    <p class="m0 text-muted">
                                        <small>1 new follower</small>
                                    </p>
                                </div>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <div class="media-box">
                                <div class="pull-left">
                                    <em class="fa fa-envelope fa-2x text-warning"></em>
                                </div>
                                <div class="media-box-body clearfix">
                                    <p class="m0">New e-mails</p>
                                    <p class="m0 text-muted">
                                        <small>You have 10 new emails</small>
                                    </p>
                                </div>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <div class="media-box">
                                <div class="pull-left">
                                    <em class="fa fa-tasks fa-2x text-success"></em>
                                </div>
                                <div class="media-box-body clearfix">
                                    <p class="m0">Pending Tasks</p>
                                    <p class="m0 text-muted">
                                        <small>11 pending task</small>
                                    </p>
                                </div>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <small translate="topbar.notification.MORE">More notifications</small>
                                <span class="label label-danger pull-right">14</span>
                            </a>
                        </div>
                    </li>
                </ul>-->
                <!-- END Dropdown menu-->
            </li>
            <!-- END Alert menu-->
            <!-- START Offsidebar button-->
            <li>
                <a toggle-state="offsidebar-open" no-persist="no-persist">
                    <em class="icon-notebook"></em>
                </a>
            </li>
            <!-- END Offsidebar menu-->
        </ul>
        <!-- END Right Navbar-->
    </div>
</nav>
<!-- END Top Navbar-->